
// 调用用户名
renderUser()
// 调用鉴权
checkLogin()

// 退出登录
logout()

// 显示弹框
// 获取模态框bootstrap
const modalDom = document.querySelector('#modal')
// 实例化
const modal = new bootstrap.Modal(modalDom)

// 监听显示和隐藏 需要绑定事件 事件类型 'show.bs.modal'显示触发 'hide.bs.modal'显示隐藏
// 监听模态框的显示和隐藏
// document.querySelector('#openModal').addEventListener('click',function(){
//     // 显示模态框
//     modal.show()
// })
// modalDom.addEventListener('show.bs.modal',event=>{
//     console.log('modal显示了');
    
// })
// modalDom.addEventListener('hide.bs.modal',event=>{
//     console.log('modal隐藏了');
    
// })



// 数据增删改查
const list =document.querySelector('.list')
async function render(){
const{data}=await axios.get('/students')
document.querySelector('.total').innerHTML=data.length
list.innerHTML=data.map(item=>{
    return`
    <tr>
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.gender?'女':'男'}</td>
    <td>第${item.group}组</td>
    <td>${item.hope_salary}</td>
    <td>${item.salary}</td>
    <td>${item.province}${item.city}${item.area}</td>
    <td>
        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${item.id}></i></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${item.id}></i></a>
    </td>
    </tr>
    `
}).join('')
}
render()


const proSelect=document.querySelector('[name="province"]')
const citSelect=document.querySelector('[name="city"]')
const areaSelect=document.querySelector('[name="area"]')
let p=''
// 初始化省市区
async function initSelect(){
// 显示省份
const {list} = await axios.get('/api/province')
const html1=list.map(item=>{
    return`
     <option value="${item}">${item}</option>
    `
}).join('')
proSelect.innerHTML=`<option >--省份--</option>`+html1
// 切换省份，显示对应的城市
proSelect.addEventListener('change',async function (e) {
    // 怎样获取切换的城市
    p=e.target.value
    const{list}=await axios.get(`/api/city?pname=${e.target.value}`)
    const html2=list.map(item=>{
        return`
        <option value="${item}">${item}</option>
        `
    }).join('')
    citSelect.innerHTML=`<option >--城市--</option>`+html2
    // 切换省份城市数据  还原地区
    areaSelect.innerHTML=`<option >--地区--</option>`
})
// 切换城市，显示对应的地区
citSelect.addEventListener('change',async function (e) {
    const{list}=await axios.get(`/api/area?pname=${p}&cname=${e.target.value}`)
    const html3=list.map(item=>{
        return`
        <option value="${item}">${item}</option>
        `
    }).join('')
    areaSelect.innerHTML=`<option >--地区--</option>`+html3
   
})
}
initSelect()


// 定义标识
let rowId=null
// 添加业务
document.querySelector('#openModal').addEventListener('click',function(){
//  给定义的标识赋值
    rowId=null
    // 显示模态框
    modal.show()

})
// 编辑业务
list.addEventListener('click',async function (e) {
    // 判断事件源
if(e.target.classList.contains('bi-pen')){
    // 给定义的标识赋值
    rowId=e.target.dataset.id
   
    // 数据回显
    // 1.数据请求  拿到点击的数据
    const{data}=await axios.get(`/students/${rowId}`)
    // 2.给标签绑定数据
    // 2.1给有规则的表单进行赋值（回显）
    const resArr=['name','age','group','hope_salary','salary']
    resArr.forEach(item=>{
        document.querySelector(`[name=${item}]`).value=data[item]
    })
    // 2.2给性别进行赋值
    const genders=document.querySelectorAll('[name=gender')
    genders[data.gender].checked=true
    // 2.3给籍贯进行赋值
    const{province,city,area}=data
    // 回显省份
    proSelect.value=province
    // 回显
    // 省市区下拉菜单回显，首先下拉菜单有数据（省城区），给对应的标签设置value值
    const{list:list1}=await axios.get(`/api/city?pname=${province}`)
    const html2=list1.map(item=>{
        return`
        <option value="${item}">${item}</option>
        `
    }).join('')
    citSelect.innerHTML=`<option >--城市--</option>`+html2

    // 回显城市
    citSelect.value=city
    // 回显地区
    const{list:list2}=await axios.get(`/api/area?pname=${province}&cname=${city}`)
    const html3=list2.map(item=>{
        return`
        <option value="${item}">${item}</option>
        `
    }).join('')
    areaSelect.innerHTML=`<option >--地区--</option>`+html3

    // 回显地区
    areaSelect.value=area
// 显示模态框
modal.show()
}
// 判断是否为删除按钮
if(e.target.classList.contains('bi-trash')){
    const id=e.target.dataset.id
    // 弹框确认删除
    const flag=confirm('您确认删除吗？')
    // console.log(flag)true 确定 false 取消
    if(flag){
        // 删除数据
        await axios.delete(`/students/${id}`)
        // 提示
        showToast('删除成功')
        // 重新渲染
        render()
    }

}
})

const form=document.querySelector('#form')
// 点击确定按钮 添加和编辑
document.querySelector('#submit').addEventListener('click',async function(){
//    判断是添加还是编辑
if(rowId){
    // 编辑
     // 添加
    // 1.收集用户的信息
    const data=serialize(form,{hash:true,empty:true})
    // 2.处理数据
    data.age=+data.age
    data.gender=+data.gender
    data.group=+data.group
    data.hope_salary=+data.hope_salary
    data.salary=+data.salary
    // 3.提交数据
    await axios.put(`/students/${rowId}`,data)
    // 4.提示用户
    showToast('编辑成功')
    // 5.重新渲染
    render()
}else{
    // 添加
    // 1.收集用户的信息
    const data=serialize(form,{hash:true,empty:true})
    // 2.处理数据
    data.age=+data.age
    data.gender=+data.gender
    data.group=+data.group
    data.hope_salary=+data.hope_salary
    data.salary=+data.salary
    // 3.提交数据
    await axios.post('/students',data)
    // 4.提示用户
    showToast('添加成功')
    // 5.重新渲染
    render()
}
    modal.hide()
})

// modal-title
// 监听模态框是否显示 显示修改模态框的标题 
/ modalDom.addEventListener('show.bs.modal',event=>{
    //     console.log('modal显示了');
        document.querySelector('.modal-title').innerHTML=rowId?'编辑学员':'添加学员'
    })

    // 监听模态框是否隐藏，如果隐藏清空所有表单
    modalDom.addEventListener('hide.bs.modal',event=>{
    form.reset()
    
})
